<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf8">
    <title>登录</title>
    <link rel="stylesheet" href="css/login.css" type="text/css">
    <script src="../../weblib/jslib/vue.js"></script>
    <style>
        img {
            width: 150px;
            height: 70px;
            overflow: no-display;
        }

        .error {
            color: #FF416C;
        }
    </style>

</head>
<body>

<img src="pic/icon.jpg">
<br/>

<div class="container" id="container">
    <div class="form-container sign-up-container">
        <form action="#">
            <h1>注册</h1>
            <br/>
            <!-- <span>使用邮箱注册</span> -->
            <input v-model="signupData.account" type="text" placeholder="帐号"/>
            <input v-model="signupData.password" type="password" placeholder="密码"/>
            <input v-model="signupData.name" type="text" placeholder="姓名"/>
            <input v-model="signupData.dept" type="text" placeholder="部门"/>
            <input v-model="signupData.position" type="text" placeholder="职位"/>
            <input v-model="signupData.email" type="email" placeholder="邮箱"/>
            <br/>
            <button @click.prevent="signup">注册</button>
        </form>
    </div>

    <!--            登录             -->

    <div class="form-container sign-in-container">
        <form action="#">
            <h1>登录</h1>
            <br/>
            <input v-model="signinData.account" type="text" placeholder="帐号"/>
            <input v-model="signinData.password" type="password" placeholder="密码"/>
            <!-- 验证码 -->
            <span style="box-align: left;">
                    <input v-model="signinData.code" type="text" style="width: 50%;" placeholder="验证码"/>
                    <a href="javascript:void(0);"><canvas id="verificationCode" width="70px" height="27px"
                                                          style="float: right; " onclick="getVerifyCode()"></canvas></a>
                <!-- border:1px solid #d3d3d3; -->
                    </span>
            <p class="error" v->{{signinData.message}}</p><a href="#">忘记密码</a>
            <button @click.prevent="signin">登录</button>
        </form>
    </div>
    <div class="overlay-container">
        <div class="overlay">
            <div class="overlay-panel overlay-left">
                <h1>欢迎加入东软睿道！</h1>
                <p></p>
                <button class="ghost" id="signIn">登录</button>
            </div>
            <div class="overlay-panel overlay-right">
                <h1>欢迎来到东软机会管理系统</h1>
                <p></p>
                <button class="ghost" id="signUp">注册</button>
            </div>
        </div>
    </div>
</div>
<script>
    let verifyCode;
    let app = new Vue({
        el: "body>div",
        data: {
            signinData: {
                message: "",
                account: "",
                password: "",
                code: ""
            },
            signupData: {
                account: "",
                password: "",
                name: "",
                dept: "",
                position: "",
                email: "",
                message: ""
            }


        },
        methods: {
            signin() {
                alert("待完成");
                //验证验证码
                if (code.trim() === verifyCode) {
                    message = ""
                }
                //验证帐号密码
                // sessionStorage
            //    opms->userinfo
            },
            signup() {
                alert("待完成");
            }
        }
    });


    verifyCode = createVerificationCode();

    //给html调用的获取验证码  为了返回验证码后期验证
    function getVerifyCode() {
        verifyCode = createVerificationCode();
        // alert(verifyCode);
    }

    //获取验证码
    function createVerificationCode() {
        code = "";
        var codeLength = 4;//验证码的长度
        var canvas = document.getElementById('verificationCode');//获取画布
        //所有候选组成验证码的字符
        var selectChar = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z');

        for (var i = 0; i < codeLength; i++) {
            var charIndex = Math.floor(Math.random() * 36);
            code += selectChar[charIndex];
        }
        if (canvas) {
            var ctx = canvas.getContext('2d');
            ctx.fillStyle = '#FFFFFF';
            ctx.fillRect(0, 0, 70, 27);
            ctx.font = "20px arial";
            ctx.strokeText(code, 5, 20);//画布上添加验证码
            return code;
        }
    }


</script>

<script type="text/javascript" src="js/login.js"></script>

</body>
</html>